<html>
<head>
    <title>菜单管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">电价配置</div>
    <div class="page-main">
        <el-row>

            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item>
                            <el-button type="success" @click="addClick" >新增</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table   border stripe style="width: 100%" :data="tabData">
                     <el-table-column prop="energyType" label="名称" align="center">

                     </el-table-column>
                    <el-table-column prop="beginDate" label="启用时间" align="center">
                    </el-table-column>
                    <el-table-column prop="price" label="总和价格" align="center">
                    </el-table-column>
                    <el-table-column prop="price_J" label="尖价格"  align="center">
                    </el-table-column>
                    <el-table-column prop="time_J1" label="尖时段"  align="center">
                    </el-table-column>

                    <el-table-column prop="price_F" label="峰价格"  align="center">
                    </el-table-column>
                    <el-table-column prop="time_F1" label="峰时段"  align="center">
                    </el-table-column>

                    <el-table-column prop="price_P" label="平价格"  align="center">
                    </el-table-column>
                    <el-table-column prop="time_P1" label="平时段"  align="center">
                    </el-table-column>

                    <el-table-column prop="price_G" label="谷价格"  align="center">
                    </el-table-column>
                    <el-table-column prop="time_G1" label="谷时段"  align="center">
                    </el-table-column>

                    <el-table-column label="操作"  align="center" fixed="right" width="140">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" round size="mini"  icon="el-icon-edit"></el-button>
                            <el-button  round icon="el-icon-delete"  size="mini" @click="delClick(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑方案':'新增方案'"
                   :visible.sync="editFormVisible"
                   center
                   width="35%"
        >
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="名称" prop="energyType"  >
                    <el-input v-model="form.energyType" ></el-input>
                </el-form-item>
                <el-form-item label="启用时间" prop="beginDate"  >
                    <el-input v-model="form.beginDate" ></el-input>
                </el-form-item>

                <el-form-item label="价格总和" prop="price" >
                    <el-input v-model="form.price" ></el-input>
                </el-form-item>
                <el-form-item label="峰价格" prop="price_F">
                    <el-input  v-model="form.price_F" ></el-input>
                </el-form-item>
                <el-form-item label="峰时段" prop="time_F1">
                    <el-select v-model="form.time_F1" multiple placeholder="请选择" style="width: 100%">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="谷价格" prop="price_G">
                    <el-input  v-model="form.price_G" ></el-input>
                </el-form-item>
                <el-form-item label="谷时段" prop="time_G1">
                    <el-select v-model="form.time_G1" multiple placeholder="请选择" style="width: 100%">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="平价格" prop="price_P">
                    <el-input  v-model="form.price_F" ></el-input>
                </el-form-item>
                <el-form-item label="平时段" prop="time_P1">
                    <el-select v-model="form.time_P1" multiple placeholder="请选择" style="width: 100%">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="尖价格" prop="price_J">
                    <el-input  v-model="form.price_J" ></el-input>
                </el-form-item>
                <el-form-item label="尖时段" prop="time_J1">
                    <el-select v-model="form.time_J1" multiple placeholder="请选择" style="width: 100%">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelClick('form')" style="background-color: #7eb8b0  ">取消</el-button>
                <el-button  @click="submitClick('form')" style="margin-left: 40px;background-color: #f9b317;">保存</el-button>
            </div>
        </el-dialog>
    </div>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
            editFormVisible:false,
            tabData:[],
            form:{},
            editMod:false,
            options:[],
        },
        methods:{
            onTreeNode:function(data){

            },
            addClick:function(data) {
                this.editMod = false
                this.editFormVisible = true
                this.form = {};
            },
            handleClick(row){
                this.editMod = true
                this.editFormVisible = true
                this.form = JSON.parse(JSON.stringify(row));
                this.form.time_F1 = this.form.time_F1 ? this.form.time_F1.split(','):'';
                this.form.time_G1 = this.form.time_G1 ? this.form.time_G1.split(','):'';
                this.form.time_P1 = this.form.time_P1 ? this.form.time_P1.split(','):'';
                this.form.time_J1 = this.form.time_J1 ? this.form.time_J1.split(','):'';
            },
            delClick(data) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('option/Delete',{RecordID:data.recordID}).success((res)=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getSysOption();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitClick(formName){
                this.$refs[formName].validate((valid) =>{
                    if (valid){
                        if(!this.editMod){
                            this.form.time_F1 = this.form.time_F1 ? this.form.time_F1.join(','):'';
                            this.form.time_G1 = this.form.time_G1 ? this.form.time_G1.join(','):'';
                            this.form.time_P1 = this.form.time_P1 ? this.form.time_P1.join(','):'';
                            this.form.time_J1 = this.form.time_J1 ? this.form.time_J1.join(','):'';
                            HttpUtil.get('EnergyPrice/Add',this.form).success((res)=>{
                                this.$message({
                                    type:'success',
                                    message:'保存成功',
                                });
                                this.getSysOption();
                            })
                        }else{
                            HttpUtil.get('EnergyPrice/Update',this.form).success((res)=>{
                                this.$message({
                                    type:'success',
                                    message:'修改成功',
                                });
                                this.getSysOption();
                            })
                        }

                    }else{
                        this.$message({
                            type:'error',
                            message:'输入内容不能为空'
                        })
                    }
                });
            },
            cancelClick(){
                this.editFormVisible = false;

            },
            getSysOption(params){
                HttpUtil.get('EnergyPrice/List',params).success((res)=>{
                    this.tabData = res.data;
                })
            }

        },
        created:function(){
            this.getSysOption();
            for (let i = 0 ; i<24 ; i++){
                this.options.push({label:i,value:i});
            }
        },
        mounted:function(){
        }
    });


</script>

</body>
</html>
